<template>
<div>
  <h1>账号状态</h1>
  <el-result v-if="agency.aaccountStatus === '0'" icon="success" title="成功提示" subTitle="您的账号目前正常">
    <template slot="extra">
      <el-button type="primary" size="medium">返回</el-button>
    </template>
  </el-result>
  <el-result v-if="agency.aaccountStatus === '1'" icon="error" title="错误提示" subTitle="您的账号被冻结，请致电xxx">
    <template slot="extra">
      <el-divider></el-divider>
      <div>
        <div>
          <div>
            原因：
          </div>
          <div>
            {{freeze.fdesc}}
          </div>
        </div>
        <el-divider></el-divider>
        <div>
          <el-button @click="goAppeal" type="primary" size="medium">进行申诉</el-button>
        </div>
      </div>
    </template>
  </el-result>
  <el-drawer
      title="申诉信息填写"
      :before-close="handleClose"
      :visible.sync="dialog"
      direction="ltr"
      custom-class="demo-drawer"
      ref="drawer"
      size="50%"
  >
    <div class="demo-drawer__content" style="text-align: left">
      <el-form :model="form">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input disabled v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="订单号" :label-width="formLabelWidth">
          <el-input disabled v-model="form.oId" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="申诉原因" :label-width="formLabelWidth">
          <el-input type="textarea" v-model="form.desc" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="佐证材料：" prop="type">
          <el-upload
              action="http://localhost:8081/index/upload"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-success="handleAvatarSuccess"
              :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
      </el-form>
      <div class="demo-drawer__footer" style="text-align: center">
        <el-button @click="cancelForm">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </div>
  </el-drawer>
</div>
</template>

<script>
export default {
  name: "AccountStatus",
  data(){
    return{
      agency:{},
      freeze: {},
      dialog:false,
      form:{
        name:'',
        desc:'',
        oId:''
      },
      formLabelWidth:"80px",
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      uploadList:[]
    }
  },
  methods:{
    goAppeal(){
      this.dialog = !this.dialog
    },
    cancelForm() {
      this.dialog = false;
    },
    handleClose(done) {
      this.dialog = !this.dialog
    },
    submit(){
      axios({
        method:'post',
        url:'http://localhost:8081/appeal/insertAppeal',
        data:{
          aId: this.agency.aid,
          appealMsg: this.form.desc,
          oId: this.freeze.oid,
          aParentId: this.agency.aparentId,
          appealHref: JSON.stringify(this.uploadList)
        }
      }).then(res=>{
        console.log(res)
        if (res.data.code === 0){
          this.$message({
            message: res.data.msg,
            type: 'success'
          });
          this.dialog = !this.dialog
          return;
        }
        this.$message.error(res.data.msg);
      }).catch(err=>{
        console.log(err)
      })
    },
    handleRemove(file) {
      const index = this.uploadList.findIndex(item => item === file.response.data)
      if (index !== -1){
        this.uploadList.splice(index,1)
      }
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },
    handleAvatarSuccess(res, file) {
      this.uploadList.push(res.data)
      this.imageUrl = URL.createObjectURL(file.raw);
    },
  },
  mounted() {
    let agency = JSON.parse(sessionStorage.getItem("agency"))
    axios({
      method:"get",
      url:`http://localhost:8081/index/getAgencyById/${agency.aid}`
    }).then(res=>{
      console.log(res)
      this.agency = res.data.data
      this.form.name = this.agency.aname
    }).catch(err=>{
      console.log(err)
    })
    axios({
      method:"get",
      url:`http://localhost:8081/freeze/getFreezeById/${agency.aid}`
    }).then(res=>{
      console.log(res)
      this.freeze = res.data.data
      this.form.oId = this.freeze.oid
    }).catch(err=>{
      console.log(err)
    })
  }
}
</script>

<style scoped>

</style>
